<template>
  <NewLayout>
    <template v-slot:main-left>
      <Institution />
    </template>
    <template v-slot:main-button>
      <mainButton
        :main-button="mainButton"
        @toMainSearch="search"
        @toMainSearchReset="reset"
        @advanced-search-handle="advancedSearchHandle"
      />
      <search-doalog
        :dialog-visible.sync="dialogShow"
        :dialog-config.sync="dialogConfig"
      />
    </template>
    <template v-slot:search-info>
      <searchMain
        ref="searchMain"
        size="mini"
        :label-width="labelWidth"
        :model="formData"
        :rules="searchRules"
        :item-list="formItemList"
      />
      <el-divider />
    </template>
    <template v-slot:table-main>
      <common-table
        :data="infoList"
        border
        :columns-item="columns"
        :title="infoTitle"
        :loading="false"
        :item-list="itemList"
        :display-column="displayColumn"
      />
    </template>
    <template v-slot:table-member>
      <el-input v-model="input" placeholder="姓名查询" class="input" />
      <common-table
        :data="personList"
        :loading="personLoading"
        border
        highlight-current-row
        :columns-item="testColumns"

        @cell-click="cellClick"
      />

    </template>

  </NewLayout>

  <!-- <health-info :dialog-visible.sync="dialogVisible" /> -->
</template>

<script>
import NewLayout from '@/components/Layout/NewLayout.vue'
import Institution from '@/components/Trees/Institution.vue'
import mainButton from '@/components/CommonButtons/MainButton.vue'
import searchMain from '@/components/CommonForm/index.vue'
import CommonTable from '@/components/CommonTable/index.vue'
import SearchDoalog from '@/views/dialog/SearchDoalog/index.vue'
// 加载模拟数据
import {
  personList
} from '@/simdata/personage.js'
import {
  infoList,
  sexs
} from '@/simdata/healthData.js'
export default {
  components: {
    NewLayout,
    Institution,
    mainButton,
    searchMain,
    CommonTable,
    SearchDoalog
  },
  // directives: { resizeSpan },
  data() {
    return {
      dialogConfig: {
        title: '',
        dialogType: 'new' // 新增的控制
      },
      input: '',
      dialogShow: false,
      // 配置标题显示图标颜色
      itemList: [
        {
          label: '高',
          color: '#66FFFF'
        },
        {
          label: '糖',
          color: '#f3daf9'
        },
        {
          label: '精',
          color: '#FFCC99'
        },
        {
          label: '贫',
          color: '#BF924C'
        },
        {
          label: '新',
          color: '#3D9F54'
        },
        {
          label: '结',
          color: '#87FE03'
        }
      ],
      // 配置常用按钮
      mainButton: [
        {
          label: '新增',
          icon: 'el-icon-circle-plus-outline',
          type: 'primary',
          handle: () => this.addHandle()
        },
        {
          label: '导出Excel',
          icon: 'el-icon-edit-outline',
          type: 'success',
          handle: () => {
            console.log('点击了')
          }
        },
        {
          label: '新增 ',
          icon: 'el-icon-circle-plus-outline',
          type: 'primary',
          handle: () => this.addHandle()
        },
        {
          label: '删除',
          icon: 'el-icon-circle-plus-outline',
          type: 'danger',
          handle: () => this.addHandle()
        }
      ],
      // 查询表单
      formData: {
        name: '',
        identityNum: '',
        fileDoctor: '',
        fileCreationDt: ''
      },
      // label的宽度
      labelWidth: 'auto',
      // 验证
      searchRules: {
        isCheck: [
          { required: true, message: '请选择是否体检', trigger: 'change' }
        ],
        searchTime: [
          { required: true, message: '请选择时间查询项目', trigger: 'change' }
        ]
      },
      // 配置search label表单
      formItemList: [
        {
          type: 'Input',
          label: '姓名',
          span: 5,
          props: 'name'
        },
        {
          type: 'Input',
          label: '身份证号',
          span: 7,
          props: 'identityNum',
          placeholder: ''
        },
        {
          type: 'data',
          label: '随访日期',
          prop: 'fileCreationDt',
          span: 7,
          placeholder: ''
        },
        {
          type: 'Input',
          prop: 'fileDoctor',
          label: '录入医生',
          span: 5
        }
      ],
      // 所有列表数据
      infoTitle: '人员基本信息列表',
      testTitle: '人员体检信息列表',
      infoList: [],
      personLoading: false,
      personList: [],
      // 配置显示的label标签
      columns: [
        { prop: 'name', label: '姓名', width: '100' },
        {
          prop: 'sex',
          label: '性别',
          width: '68',
          type: 'sex',
          option: sexs
        },
        { prop: 'age', label: '年龄', width: '80' },
        { prop: 'birthdata', label: '出生日期', width: '100' },
        { prop: 'identityNumber', label: '身份证号', width: '180' },
        { prop: 'phonenumber', label: '本人电话号码', width: '150' },
        { prop: 'linkName', label: '联系人姓名', width: '100' },
        { prop: 'linkNumber', label: '联系人电话', width: '150' },
        { prop: 'nowAddress', label: '现住地址', width: '150' },
        {
          prop: 'isSign',
          label: '是否签约',
          width: '80',
          type: 'isSign',
          callback: row => {
            let text = ''
            switch (row.isSign) {
              case 1:
                text = '已签约'
                break
              case 2:
                text = '未签约'
                break
              default:
                text = '其他'
            }
            return text
          }
        }, //
        { prop: 'responsibleDoctor', label: '责任医生', width: '100' },
        {
          prop: 'isHome',
          label: '家庭信息',
          width: '80',
          type: 'isHome',
          callback: row => {
            let text = ''
            switch (row.isHome) {
              case 1:
                text = '有'
                break
              case 2:
                text = '无'
                break
              default:
                text = '其他'
            }
            return text
          }
        }, //
        { prop: 'creatDoctor', label: '建档医生', width: '100' },
        { prop: 'createDate', label: '建档日期', width: '100' },
        { prop: 'myNumber', label: '个人健康档案号', width: '150' },
        { prop: 'number', label: '家庭档案号', width: '150' },
        {
          prop: 'isComplete',
          label: '信息是否完整',
          width: '120',
          type: 'isComplete',
          callback: row => {
            let text = ''
            switch (row.isComplete) {
              case 1:
                text = '完整'
                break
              case 2:
                text = '不完整'
                break
              default:
                text = '其他'
            }
            return text
          }
        },
        {
          prop: 'isLibrary',
          label: '人口库标记',
          width: '100',
          type: 'isLibrary',
          callback: row => {
            let text = ''
            switch (row.isLibrary) {
              case 1:
                text = '是'
                break
              case 2:
                text = '否'
                break
              default:
                text = '其他'
            }
            return text
          }
        },
        {
          prop: 'isPublic',
          label: '公安标记',
          width: '80',
          type: 'isPublic',
          callback: row => {
            let text = ''
            switch (row.isPublic) {
              case 1:
                text = '是'
                break
              case 2:
                text = '否'
                break
              default:
                text = '其他'
            }
            return text
          }
        }

      ],
      pitchRow: {},
      // 控制表格操作按钮的显示隐藏
      displayColumn: {
        operationCol: false,
        editBtn: true,
        removeBtn: true
      },
      // test配置label标签
      testColumns: [
        { prop: 'name', label: '姓名', width: '100' },
        { prop: 'sex', label: '性别', width: '68' },
        { prop: 'age', label: '年龄', width: '80' },
        { prop: 'birthdata', label: '出生日期', width: '100' },
        { prop: 'identityNumber', label: '身份证号', width: '180' },
        { prop: 'relation', label: '与户主关系', width: '100' }
      ],
      totalList: []
    }
  },
  created() {
    for (const person of personList) {
      this.totalList.push(person)
    }
    this.infoList = this.totalList
  },
  methods: {
    // 点击新增按钮
    addHandle() {
      console.log('点击新增了')
    },
    // 切换常用地址
    handleChange() {
      console.log('点击了')
    },
    // 点击搜索按钮
    search() {
      this.personLoading = true
      this.$refs.searchMain.validate(valid => {
        if (valid) {
          // 调用接口
          this.callbackComponent()
          this.personLoading = false
        } else {
          this.personLoading = false
          return false
        }
      })
    },
    // 点击重置按钮
    reset(formName) {
      this.$refs.searchMain.$refs[formName].resetFields()
      // console.log(this.formData)
      this.formData.isCheck = ''
      this.formData.examine = ''
      this.formData.searchTime = ''
      this.formData.yearData = ''
      this.formData.createDate = ''
      this.formData.endDate = ''
    },
    // 点击搜索后，请求后台接口了
    callbackComponent() {
      this.personList = personList
    },
    cellClick({ row }) {
      console.log(this.pitchRow)
      if (this.pitchRow === row) {
        this.pitchRow = {}
        this.infoList = this.totalList
      } else {
        this.pitchRow = row
        this.infoList = row.healthtestList
      }
    },
    advancedSearchHandle() {
      this.dialogShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .input{
   width: 200px;
   margin-bottom: 10px;
  }

</style>
